<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryChooseItineraryTypeManagedBean.initView}"/>
        <p:menubar model="#{itineraryChooseItineraryTypeManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryChooseItineraryTypeManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">

        <h:form id="formMain">
            <p:confirmDialog message="Are you sure about cancelling this reservation? We will return all the deposits minus cancellation fee of $5sgd" 
                             showEffect="bounce" hideEffect="explode" header="Confirm cancellation reservation" severity="alert" widgetVar="acceptconfirmation"> 
                <p:commandButton value="Yes" update="panel" onclick="acceptconfirmation.hide()" actionListener="#{reservationManagerBean.cancelReservation}" /> 
                <p:commandButton value="No" onclick="acceptconfirmation.hide()" type="button" /> 
            </p:confirmDialog>
            <p:panel header="List of Reservations" style="width:300px; float:left;">
                <p:tab title="F and B Branches" >
                    <p:dataTable var="reservation" value="#{reservationManagerBean.listOfReservation}" paginator="true" 
                                 rows="10" emptyMessage="No F and B Reservation" selection="#{reservationManagerBean.reservation}" 
                                 selectionMode="single" update="panel menu" style="width:290px;" rowSelectListener="#{reservationManagerBean.selectReservation}">
                        <p:column sortBy="#{reservationManagerBean.getFormatReservedTime(reservation.timeBegin)}" filterBy="#{reservationManagerBean.getFormatReservedTime(reservation.timeBegin)}">
                            <f:facet name="header">
                                <h:outputText value="Time" />
                            </f:facet>
                            <h:outputText value="#{reservationManagerBean.getFormatReservedTime(reservation.timeBegin)}" />
                        </p:column>
                        <p:column sortBy="#{reservationManagerBean.getFormatReservedDate(reservation.dateReserved) }" filterBy="#{reservationManagerBean.getFormatReservedDate(reservation.dateReserved) }">
                            <f:facet name="header">
                                <h:outputText value="Date" />
                            </f:facet>
                            <h:outputText value="#{reservationManagerBean.getFormatReservedDate(reservation.dateReserved)}" />
                        </p:column>
                    </p:dataTable>
                </p:tab>
            </p:panel>

            <p:panel id="panel" style="float:left; width:700px;">
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
                <p:messages />
                <p:accordionPanel autoHeight="true" style="width:680px;" id="accordion">
                    <p:tab title="Summary">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="Date:"/>
                            <h:outputText value="#{reservationManagerBean.getReservedDate()}" style="font-weight: bold"/>
                            <h:outputText  value="Time:   "/>
                            <h:outputText value="#{reservationManagerBean.reservation.timeBegin}" style="font-weight: bold"/>
                            <h:outputText  value="Number of people:" /> 
                            <h:outputText value="#{reservationManagerBean.reservation.noOfPeople}" style="font-weight: bold"/>
                            <h:outputText  value="Confirmation Status:" /> 
                            <h:outputText value="#{reservationManagerBean.reservation.confirmation}" style="font-weight: bold"/>
                            <h:outputText  value="Reservation Status:" rendered="#{reservationManagerBean.reservation.status != null}"/> 
                            <h:outputText value="#{reservationManagerBean.reservation.status}" style="font-weight: bold" rendered="#{reservationManagerBean.reservation.status != null}"/>
                            <h:outputText value="Total offline bill:" />
                            <h:outputText value="#{reservationManagerBean.totalBill}" style="font-weight: bold; color:blue;"/>

                            <h:outputText value="Total online bill:" />
                            <h:outputText value="#{reservationManagerBean.discountBill}" style="font-weight: bold; color:red;"/>

                            <h:outputText value="You Save:" />
                            <h:outputText value="#{reservationManagerBean.totalBill - reservationManagerBean.discountBill}" style="font-weight: bold; color:purple;"/>

                            <h:outputText value="Deposit:"/>
                            <h:outputText value="#{reservationManagerBean.reservation.deposit}" style="font-weight: bold; color:purple;"/>

                            <h:outputText value="Special Request: " />  
                            <h:outputText value="#{reservationManagerBean.reservation.specialRequest}"/>
                            <p:commandButton id="btn" value="Change Reservation" update="panel"  actionListener="#{reservationManagerBean.changeReservationInfo}" disabled="#{reservationManagerBean.checkChangeEligible()}"/>
                            <p:commandButton id="btn1" value="Cancel Reservation" update="panel"   disabled="#{reservationManagerBean.checkChangeEligible()}" onclick="acceptconfirmation.show()" type="button"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="Table Info">
                        <h1>Table selected</h1>
                        <p:dataTable id="test" var="table" value="#{reservationManagerBean.listOfReservedTable}" 
                                     rowIndexVar="row" >
                            <p:column headerText="Picture">
                                <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{table.tableType.imageURL}" width="150" height="120"></h:graphicImage>
                            </p:column>

                            <p:column headerText="Name">
                                <h:outputText value="#{table.tableType.name}" />
                            </p:column>

                            <p:column headerText="Description">
                                <h:outputText value="#{table.tableType.description}" />
                            </p:column>

                            <p:column headerText="Seats">
                                <h:outputText value="#{table.tableType.unitCapacity}" />
                            </p:column>

                            <p:column headerText="Quantity">
                                <h:outputText  value="#{table.quantity}" />   
                            </p:column>
                        </p:dataTable>
                    </p:tab>
                    <p:tab title="Meal Info" id="menu">
                        <h:outputText value="Meal" styleClass="menu" />
                        <p:dataTable value="#{reservationManagerBean.listOfReservedMeal}" var="resMeal" style="width:100%" paginator="true" rows="2" emptyMessage="No meal booked">  
                            <p:column headerText="Picture">
                                <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{resMeal.meal.imageLink}" width="150" height="120"></h:graphicImage>
                            </p:column>
                            <p:column headerText="Name">
                                <h:outputText value="#{resMeal.meal.name}" />
                            </p:column>  
                            <p:column headerText="Description">
                                <h:outputText value="#{resMeal.meal.description}" />
                            </p:column>
                            <p:column headerText="Price">
                                <h:outputText value="#{resMeal.price}" />
                            </p:column>
                            <p:column headerText="Point Received">
                                <h:outputText value="#{resMeal.pointReceived}" />
                            </p:column>
                        </p:dataTable>
                        <h:outputText value="Set Meal" styleClass="menu" />
                        <p:dataTable value="#{reservationManagerBean.listOfReservedSetMeal}" var="resSet" style="width:100%" paginator="true" rows="2" emptyMessage="No set meal booked" >  
                            <p:column headerText="Picture">
                                <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{resSet.setMeal.imageLink}" width="150" height="120"></h:graphicImage>
                            </p:column>
                            <p:column headerText="Name">
                                <h:outputText value="#{resSet.setMeal.name}" />
                            </p:column>  
                            <p:column headerText="Description">
                                <h:outputText value="#{resSet.setMeal.description}" />
                            </p:column>
                            <p:column headerText="Price">
                                <h:outputText value="#{resSet.price}" />
                            </p:column>
                            <p:column headerText="Point Received">
                                <h:outputText value="#{resSet.pointReceived}" />
                            </p:column>
                        </p:dataTable> 
                    </p:tab>
                </p:accordionPanel>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>